<template>
  <input type="text" v-model="name">
  <div>{{name}}</div>

  <br/>
  <child :name="name"></child>

</template>

<script>

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue'
import child from './11.lifecycle_child.vue'

export default {
  name: 'father',
  components: {
    child
  },
  setup (props, context) {

    onBeforeMount(() => {
      console.log('f onBeforeMount')
    })

    onMounted(() => {
      console.log('f onMounted')
    })

    onBeforeUpdate(() => {
      console.log('f onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('f onUpdated')
    })

    // 监听ref
    let name = ref('')

    return {
      name
    }
  }
}
</script>

<style>

</style>
